<template>
  <div class="system-mine">
    <div class="system-mine__header">
      <h3>{{ t('home.text30') }} <div @click="dailyAttendance">{{t("signIn.text1")}}</div></h3>
      <div class="system-mine__header-user">
        <div class="system-mine__header-user-pic">
          <img :src="getHeadPic" alt="">
          <span>{{ users.userName }} <i-ion-copy-outline @click="copy(users.userName)"/></span>
          <em>{{ users.email }}<i v-if="users.area && users.phone">/</i> {{ users.area }}{{ users.phone }}</em>
        </div>
      </div>
    </div>
    <dl class="sysmte-mine__list">
      <dt>{{ t("home.Promotions") }}</dt>
      <ul>
        <li v-for="menu in information" :key="menu.linker" @click="openInfo(menu)">
          <span class="mine-linker__icon"><component :is="menu.icon">ICON</component></span>
          {{ menu.name }}
          <IEpArrowRightBold class="mine-linker__right"/>
        </li>
      </ul>
    </dl>
    <dl class="sysmte-mine__list">
      <dt>{{ t("userData.userInfo") }}</dt>
      <ul>
        <li v-for="menu in userCenter" :key="menu.linker" @click="openInfo(menu)">
          <span class="mine-linker__icon"><component :is="menu.icon">ICON</component></span>
          {{ menu.name }}
          <IEpArrowRightBold class="mine-linker__right"/>
        </li>
      </ul>
    </dl>
    <dl class="sysmte-mine__list">
      <dt>{{ t("mail.systemSetting") }}</dt>
      <ul>
        <li v-for="menu in systemSet" :key="menu.linker" @click="openInfo(menu)">
          <span class="mine-linker__icon"><component :is="menu.icon">ICON</component></span>
          {{ menu.name }}
          <div class="mine-linker__right mine-badge" v-if="menu.badge === 'email' && piniaUserinfo.getEmailUnread > 0">{{ piniaUserinfo.getEmailUnread }}</div>
          <div class="mine-linker__right mine-badge" v-if="menu.badge === 'message' && piniaUserinfo.getNoticeUnread > 0">{{ piniaUserinfo.getNoticeUnread }}</div>
          <IEpArrowRightBold
            class="mine-linker__right"
            v-if="!menu.badge ||
            (
              (menu.badge === 'email' && piniaUserinfo.getEmailUnread == 0) ||
              (menu.badge === 'message' && piniaUserinfo.getNoticeUnread == 0)
            )"
          />
        </li>
      </ul>
    </dl>
  </div>
  <Dialog
    v-model:visible="dialogConfig.show"
    v-model:title="dialogConfig.title"
    v-model:autoHeight="dialogConfig.autoHeight"
    :width="dialogConfig.width"
    :headerFixed="dialogConfig.headerFixed"
    :hiddenTitle="dialogConfig.hiddenTitle"
  >
    <RescueFunds v-if="active === 'RescueFunds'" v-model:title="dialogConfig.title" @back="goBack"/>
    <MemberRebateH5 v-if="active === 'MemberRebateH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <BettingRecordH5 v-if="active === 'BettingRecordH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <CapitalRecordH5 v-if="active === 'CapitalRecordH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <AccessRecordH5 v-if="active === 'AccessRecordH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <InviteFriends v-if="active === 'InviteFriends'" v-model:title="dialogConfig.title" @back="goBack"/>
    <UserInfoH5 v-if="active === 'UserInfoH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <ChangePaswordH5 v-if="active === 'ChangePaswordH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <WithdrawalAccountH5 v-if="active === 'WithdrawalAccountH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <EmailH5 v-if="active === 'EmailH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <NoticeH5 v-if="active === 'NoticeH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <HelpH5 v-if="active === 'HelpH5'" v-model:title="dialogConfig.title" @back="goBack"/>
    <!-- 签到 PC H5通用-->
    <DailyAttendance v-if="active === 'DailyAttendance'" v-model:title="dialogConfig.title" @back="goBack"/>
  </Dialog>
</template>

<script setup lang="ts" name="Me">
import nocache from '@/store/nocache';
import userinfo from '@/store/userinfo';
import { copy } from '@/utils/format';

const piniaNocache:any = nocache();
const piniaUserinfo:any = userinfo();
const { t } = useI18n();

// 计算属性
const users = computed(()=>{
  return piniaUserinfo.getUserinfo.user || {};
});

// 计算属性
const getHeadPic = computed(()=>{
  const pic = piniaUserinfo.getUserinfo.user && piniaUserinfo.getUserinfo.user.avatar;
  return new URL(`../../assets/images/mine/${pic || '01'}.png`, import.meta.url).href;
});

// 查询邮件和消息的个数
piniaUserinfo.queryNoticeAndEmail();

const data: any = reactive({
  information: [
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('Transaction.text16')),
      linker: 'RescueFunds'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ic/baseline-settings-backup-restore'))),
      name: computed(()=>t('menuActive.rebate')),
      linker: 'MemberRebateH5'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/icon-park-outline/transaction-order'))),
      name: computed(()=>t('BetRecord.RecordQuery')),
      linker: 'BettingRecordH5'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('UserInfo.Transactions')),
      linker: 'CapitalRecordH5'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/tabler/calendar-dollar'))),
      name: computed(()=>t('Transaction.cqjl')),
      linker: 'AccessRecordH5'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/solar/stars-line-bold-duotone'))),
      name: computed(()=>t('inviteFriend.inviteFriend')),
      linker: 'InviteFriends'
    },
  ],
  userCenter: [
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('userData.userInfo')),
      linker: 'UserInfoH5'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('userData.updatePsw')),
      linker: 'ChangePaswordH5'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('userData.bindCard')),
      linker: 'WithdrawalAccountH5'
    },
  ],
  systemSet: [
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('mail.Messages')),
      linker: 'EmailH5',
      badge: 'email'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('mail.announcement')),
      linker: 'NoticeH5',
      badge: 'message'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('home.HelpCenter')),
      linker: 'HelpH5'
    },
    {
      icon: shallowRef(defineAsyncComponent(()=>import('~icons/ant-design/transaction-outlined'))),
      name: computed(()=>t('UserInfo.Logout')),
      linker: 'Logout'
    },
  ],
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    width: "100%",
    hiddenTitle: true,
    autoHeight: false
  },
  active: ""
});

const {
  information,
  userCenter,
  systemSet,
  dialogConfig,
  active
} = toRefs(data);

const openInfo = (menu: any) => {
  console.log(menu)
  if(menu.linker === 'Logout'){
    piniaUserinfo.logout();
  }else{
    dialogConfig.value.show = true;
    dialogConfig.value.title = menu.name;
    active.value = menu.linker;
  }
}

// 每日签到
const dailyAttendance = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.title = t('lang.el.pageHeader.title');
  active.value = 'DailyAttendance';
}

const goBack = () => {
  dialogConfig.value.show = false;
}

onMounted(()=>{
  piniaNocache.setIsOpenHeader(false);
});

onUnmounted(()=>{
  piniaNocache.setIsOpenHeader(true);
});
</script>

<style lang="scss" scoped>
@import url(./index.scss);
</style>
